<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>code</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="webjars/jquery/3.1.1/jquery.min.js"></script>
    <script src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <script type="text/javascript" src="/jquery.ajax.extend.js"></script>

    <script src="/webjars/vue/2.1.3/vue.js"></script>
</head>
<body>

<div class="container"  id="codeApp" style="margin: 10px auto;">

    <div class="row clearfix">
        <div class="col-md-12 column">
            <form role="form">
                <div class="form-group">
                    <label for="">tableName</label>
                    <select type="text" class="form-control"
                           v-model="code.tableName" @change="getAllColumns"
                    >



                        <option v-for="option in code.tableNameList" v-bind:value="option.tableName" >
                            {{ option.tableName }}
                        </option>

                    </select>
                </div>
            </form>
        </div>
    </div>




    <div class="tabbable" id="tabs-530079">
        <ul class="nav nav-tabs nav-pills nav-justified" id="nav2018">
            <li id="nav-list" class="active">
                <a href="#panel-991862" data-toggle="tab">字段</a>
            </li>
            <li id="nav-detail" >
                <a href="#panel-236062" data-toggle="tab">log</a>
            </li>
        </ul>
        <div class="tab-content">

            <div class="tab-pane active" id="panel-991862">

                <div class="row clearfix">
                    <h2> <button type="button" class="btn btn-success"  @click="toCode">to code</button>  </h2>
                    <table class="table table-hover table-striped table-bordered table-sm table-condensed">
                        <thead>
                        <tr>
                            <th>
                                tableName
                            </th>
                            <th>
                                columnName
                            </th>
                            <th>
                                dataType
                            </th>
                            <th>
                                columnComment
                            </th>
                            <th>
                                查询
                            </th>
                            <th>
                                列表
                            </th>
                            <th>
                                新增
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in code.columnList" >
                            <!--<td><input disabled type="checkbox" :value="index" v-model="checkedRows"></td>-->
                            <td>{{item.tableName}}</td>
                            <td>{{item.columnName}}</td>
                            <td>{{item.dataType}}</td>
                            <td>{{item.columnComment}}</td>
                            <td><input class="form-control" type="checkbox" :value="item" v-model="code.selectColumnList"></td>
                            <td><input class="form-control" type="checkbox" :value="item" v-model="code.gridColumnList"></td>
                            <td><input class="form-control" type="checkbox" :value="item" v-model="code.formColumnList"></td>

                        </tr>
                        </tbody>
                    </table>
                </div>

            </div>

            <div class="tab-pane " id="panel-236062">

                <div class="row clearfix">
                    <h2>result:</h2>
                    <div class="col-md-12 column">
                        <form role="form">
                            <div class="form-group">
                                <label for="">result</label>

                                <textarea class="form-control"
                                          rows="20"
                                          v-model="code.result">

                                </textarea>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>






</div>


</body>
</html>


<script>

    var vm = new Vue({
        el: '#codeApp',
        data: {



            code:{
                selectColumnList:[],
                gridColumnList:[],
                formColumnList:[],
                tableName:'',
                tableNameList:[],
                columnList:[],

                result:"",

            }



        },
        methods: {

            getTableNameList:function () {

                var _self = this;

                var options={

                    url: 'metaTables/all',
//                    data: urlParam,
                    type: "post",
                    datType: "JSON",
//                    contentType: "application/json"
                };


                $.ajax(options).done(
                    function (dat) {

                        console.log(dat);
                        _self.code.tableNameList=dat.data;
                    }
                );

            },


            getAllColumns:function () {

                var _self = this;

                var options={

                    url: 'metaColumns/all',
                    data: {tableName : _self.code.tableName},
                    type: "post",
                    datType: "JSON",
//                    contentType: "application/json"
                };


                $.ajax(options).done(
                    function (dat) {

                        console.log(dat);
                        _self.code.columnList=dat.data;
                        _self.code.selectColumnList=dat.data;
                        _self.code.gridColumnList=dat.data;
                        _self.code.formColumnList=dat.data;
                    }
                );
                
            },


            toCode:function () {

                this.code.result ="hahah";

                var _self = this;

                var options={

                    url: 'code/tp?tableName='+_self.code.tableName,
                    data: JSON.stringify({
                        selectColumnList: _self.code.selectColumnList,
                        gridColumnList: _self.code.gridColumnList,
                        formColumnList: _self.code.formColumnList,
                    }),
                    type: "post",
                    datType: "text",
                    contentType: "application/json;charset=utf-8"
                };


                $.ajax(options).done(
                    function (dat) {

                        console.log(dat);
                        _self.code.result=dat;

                        $('#nav2018 a:last').tab('show');
                    }
                );
            },

        },
        mounted: function () {

            this.getTableNameList();
        }
    });

</script>